<template>
  <div>
    <div class="user_info">
      <div><span>就诊人：</span>{{ info.patientName }}</div>
      <div>
        <span>性别：</span>
        <template v-if="info.patientSex == 'M'">男</template>
        <template v-if="info.patientSex == 'F'">女</template>
      </div>
      <div><span>年龄：</span>{{ info.patientAge }}</div>
    </div>
    <div class="gapbox"></div>
    <datetime v-model="selectDate" :start-date="inDate" :end-date="outDate" @on-change="changedate">
      <div class="date_box">
        <div>
          <img src="@/assets/img/calendar@2x.png" alt="" class="cale" />
          <div>计价时间</div>
        </div>
        <div>
          <div style="color: #949fb4">{{ selectDate }}</div>
          <img src="@/assets/img/drop.png" alt="" class="drop" />
        </div>
      </div>
    </datetime>
    <div style="text-align: center; padding-top: 10px">
      <span colspan="6" style="text-align: center">
        当日费用：<span style="color: #f72d23; font-size: 1rem">￥{{ amount.toFixed(2) }}</span>
      </span>
    </div>
    <div class="table_box">
      <table>
        <thead>
          <tr>
            <th>项目</th>
            <th>类别</th>
            <th>数量</th>
            <th>单价</th>
            <th>总价</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="item in patientFeelist">
            <td>{{ item.patientItemname }}</td>
            <td>{{ item.patientItemfeestatname }}</td>
            <td>{{ item.patientItemqty }}{{ item.patientItemcurrentunit }}</td>
            <td>￥{{ item.patientItemunitprice }}</td>
            <td style="color:red">￥{{ item.patientItemtotcost }}</td>
          </tr>
          <tr></tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import { Datetime } from "vux";
import moment from "moment";
import { getInpatientInMainInfoDayFeeList } from "@/api/api";

export default {
  components: {
    Datetime,
  },
  data() {
    return {
      inDate: this.$route.query.inDate,
      outDate: this.$route.query.outDate,
      selectDate: this.$route.query.inDate,
      inptItem: [],
      amount: 0,
      info: {},
      patientFeelist: [],
    };
  },
  created() {
    if (this.$route.query) {
      this.info = this.$route.query;
      this.getInpatientInMainInfoDayFeeList();
    }
  },
  methods: {
    getInpatientInMainInfoDayFeeList() {
      var data = {
        startDate: this.selectDate + " 00:00:00",
        endDate: this.selectDate + " 23:59:59",
        inpatientSerialNo: this.$route.query.inpatientSerialNo,
        // inpatientSerialNo: "ZY010000015004", //住院流水号,住院记录中patientCode字段
      };
      getInpatientInMainInfoDayFeeList(data).then((res) => {
        if (res.code == 200) {
          this.patientFeelist = [];
          if (res.data.patientFeelist) {
            if (res.data.patientFeelist instanceof Array) {
              this.patientFeelist = res.data.patientFeelist;
            } else {
              this.patientFeelist.push(res.data.patientFeelist);
            }
            this.amount = 0;
            this.patientFeelist.forEach((element) => {
              this.amount +=
                parseFloat(element.patientItemunitprice) *
                parseFloat(element.patientItemqty);
            });
          } else {
            this.$vux.toast.show("未查询到住院日清单");
          }
        }
      });
    },
    changedate() {
      this.getInpatientInMainInfoDayFeeList();
    },
  },
};
</script>
<style scoped>
.date_box {
  width: calc(100% - 2rem);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
}

.date_box>div {
  display: flex;
  align-items: center;
}

.date_box>div>img {
  display: block;
  width: 1.0625rem;
  height: 0.9375rem;
}

.date_box .drop {
  width: 0.6875rem;
  height: 0.4375rem;
}

.date_box>div>div {
  margin: 0px 0.4375rem;
}

.user_info {
  width: calc(100% - 2rem);
  padding: 1.0625rem 1rem 0.8125rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9375rem;
}

.user_info>div>span {
  color: #949fb4;
}

.weui-cell {
  background-color: #f7fafd;
}

.weui-cell:before {
  border: none;
}

.gapbox {
  width: 100%;
  height: 0.625rem;
  background: rgba(247, 250, 253, 1);
}

.table_box {
  width: calc(100% - 2rem);
  padding: 0.9375rem 1rem;
  font-size: 0.8125rem;
}

.table_box table {
  width: 100%;
  border-collapse: collapse;
}

.table_box td,
th {
  border: 1px solid #d6dff1;
  font-weight: normal;
  text-align: center;
  padding: 0.3125rem 0.625rem;
}

.table_box thead {
  background-color: #f0f6ff;
  color: #949fb4;
}
</style>
